@import '@/assets/styles/theme.scss';
@mixin scrollBar {
  &::-webkit-scrollbar {
    width: 8px;
    background-color: #333;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 2px;
  }
  &::-webkit-scrollbar-track {
    width: 8px;
    background-color: #333;
  }
}
@mixin scrollBarHor {
  &::-webkit-scrollbar {
    height: 6px;
    background-color: #333;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 2px;
  }
  &::-webkit-scrollbar-track {
    height: 6px;
    background-color: #333;
  }
}

// flex布局
@mixin flex-all-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flex-center-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

@mixin flex-align-center {
  display: flex;
  align-items: center;
}

@mixin flex-center-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
@mixin flex-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
// 宽高百分百
@mixin wh-100 {
  width: 100%;
  height: 100%;
}
// 单行文本溢出显示省略
@mixin text-overflow-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
// 过渡
@mixin transition-3 {
  transition: all 0.3s linear;
}
// 过渡
@mixin transition-3-delay {
  transition: all 0.3s linear 1s;
}
// 强感阴影
@mixin card-shadow {
  box-shadow:  0px 0px 12px 0px rgba(0, 0, 0, 0.12);
}
// 微感阴影
@mixin shadow {
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .4);
}
@mixin inset-shadow-main-8 {
  box-shadow: inset 0 0 8px var(--color-main-8);
}
@mixin inset-shadow-main-4 {
  box-shadow: inset 0 0 4px var(--color-main-8);
}
@mixin inset-shadow-gray-8 {
  box-shadow: inset 0 0 8px var(--color-gray-8);
}
// 主题色文本阴影
@mixin main-text-shadow {
  // text-shadow: 0 1px 2px rgba(87,59,138, .3), 0 2px 6px var(--color-black-5);
  text-shadow: 0 2px 6px var(--color-black-5);

}
// 白色文本阴影
// 主题色文本阴影
@mixin white-text-shadow {
  // text-shadow: 0 1px 2px rgba(87,59,138, .3), 0 2px 6px var(--color-black-5);
  text-shadow: 0 2px 6px var(--color-white-5);

}
@mixin blue-text-shadow {
  // text-shadow: 0 1px 2px rgba(0,189,234, .3), 0 2px 6px var(--color-black-5);
  text-shadow: 0 2px 6px var(--color-black-5);

}
@mixin red-text-shadow {
  // text-shadow: 0 1px 2px rgba(255, 69, 69, .3), 0 2px 6px var(--color-black-5);
  text-shadow: 0 2px 6px var(--color-black-5);
}

// 主题色盒阴影
@mixin main-shadow {
  box-shadow: 0 2px 6px 0 var(--color-main);
}
// 小圆角带主边框色的小内容
@mixin content {
  width: 100%;
  border: 1px solid var(--color-main-border);
  border-radius: 8px;
  background-color: var(--color-white-10);
  @include card-shadow;
}
@mixin linearGradient {
  background-image: linear-gradient(45deg, #00dc82, #36e4da, #0047e1);
}